<template>
  <div class="guns-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <!-- <a-form-item label="开始时间:">
              <a-date-picker
                v-model:value="where.beginTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-item>
            <a-form-item label="结束时间:">
              <a-date-picker
                v-model:value="where.endTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-item> -->

            <!-- <a-form-item label="名称:">
              <a-input @keydown.enter="reload" v-model:value="where.nickName" allow-clear />
            </a-form-item> -->

            <!-- <a-form-item label="权限:">
              <a-select
                ref="select"
                v-model:value="where.invisible"
                style="width: 120px"
                :options="optionsInvisible"
              ></a-select>
            </a-form-item> -->

            <!-- <a-form-item label="状态:">
              <a-select
                ref="select"
                v-model:value="where.status"
                style="width: 120px"
                :options="options"
              ></a-select>
            </a-form-item> -->

            <a-form-item label="智能体ID:">
              <a-input v-model:value.trim="where.agentNo" placeholder="智能体ID" allow-clear />
            </a-form-item>

            <a-form-item label="智能体名称:">
              <a-input v-model:value.trim="where.nickName" placeholder="智能体名称" allow-clear />
            </a-form-item>

            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable :canResize="false" ref="tableRef" :api="AiAgentApi.findPage" :where="where" :columns="columns"
          showTableSetting rowKey="agentNo" :rowSelection="{
        type: 'checkbox',
        selectedRowKeys: checkedKeys,
      }">
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar"> </div>
          </template>

          <template #bodyCell="{ column, record }">
            <!-- N：待审核 -->
            <template v-if="column.key === 'status'">
              <a @click="approve(record)">审批</a>
              <!-- <a-switch
                checked-children="通过"
                un-checked-children="驳回"
                default-checked
                :checked="record.status === 'Y'"
                @change="(checked) => editStatus(checked, record)"
              /> -->
            </template>

            <template v-if="column.dataIndex == 'nickName'">
              <a @click="openDetail(record)">{{ record.nickName }}</a>
            </template>

            <!-- table操作栏按钮 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="openDetail(record)">详情</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>
    </div>
    <!-- 通过弹窗 -->
    <a-modal v-model:visible="visible" title="审批驳回" @ok="handleOk(record)">
      <a-radio-group v-model:value="statusOne">
        <a-radio value="Y">通过</a-radio>
        <a-radio value="S">驳回</a-radio>
      </a-radio-group>
      <a-textarea style="margin-top: 10px" v-model:value="approval" placeholder="请输入意见" auto-size />
    </a-modal>
    <!-- 操作日志详情 -->
    <ai-agent-detail v-model:visible="showDetail" :detail="current" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { message } from 'ant-design-vue';
import { AiAgentApi } from '/@/api/touch/aiAgent/AiAgentApi';
import AiAgentDetail from './aiAgent-detail.vue';

// 查询条件
const where = reactive({
  beginTime: '',
  endTime: '',
  nickName: '',
  status: 'N',
  agentNo: '',
  nickName: '',
});

const options = ref<SelectProps['options']>([
  {
    value: '',
    label: '请选择',
  },
  {
    value: 'N',
    label: '待审核',
  },
  {
    value: 'Y',
    label: '通过',
  },
]);

const optionsInvisible = ref<SelectProps['options']>([
  {
    value: '',
    label: '请选择',
  },

  {
    value: 'N',
    label: '隐身',
  },
  {
    value: 'Y',
    label: '公开',
  },
]);

// 表格配置
const columns = ref<string[]>([
  {
    title: '智能体ID',
    dataIndex: 'agentNo',
  },
  {
    title: '智能体名称',
    dataIndex: 'nickName',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  // {
  //   title: '性别',
  //   dataIndex: 'sex',
  //   customRender: function ({ text }) {
  //     if ('F' === text) {
  //       return '女';
  //     } else if ('M' === text) {
  //       return '男';
  //     } else {
  //       return '其它';
  //     }
  //   },
  // },
  // {
  //   title: '权限',
  //   dataIndex: 'invisible',
  //   customRender: function ({ text }) {
  //     if ('N' === text) {
  //       return '隐身';
  //     } else {
  //       return '公开';
  //     }
  //   },
  // },
  {
    title: '操作',
    dataIndex: 'status',
    align: 'center',
  },
]);
const visible = ref<boolean>(false);
let approval = ref<string>('');
let record = ref<any>({});
let statusOne = ref<string>('Y');
/**
 * 审批
 *
 */
const approve = async (row: any) => {
  // const agentNo = row.agentNo;
  record = { ...row };
  visible.value = true;
  // 审批：1-通过，2-待审核
  // const status = checked ? 'Y' : 'S';

  // if (status === 'Y') {
  //   const approvalOpinion = '通过';
  //   let result = await AiAgentApi.updateStatus({ agentNo, status, approvalOpinion });
  //   console.log(result);
  //   message.success(result.message);
  //   reload();
  // } else {
  //   visible.value = true;
  //   // updateStatus(agentNo, status);
  //   record = { ...row };
  // }
};
const editStatus = async (checked: boolean, row: any) => {
  const agentNo = row.agentNo;
  // 审批：1-通过，2-待审核
  const status = checked ? 'Y' : 'S';

  if (status === 'Y') {
    const approvalOpinion = '通过';
    let result = await AiAgentApi.updateStatus({ agentNo, status, approvalOpinion });
    console.log(result);
    message.success(result.message);
    reload();
  } else {
    visible.value = true;
    // updateStatus(agentNo, status);
    record = { ...row };
  }
};
const handleOk = async (row: any) => {
  const agentNo = record.agentNo;

  const status = statusOne.value;
  if (status === 'S' && approval.value === '') {
    message.error('请输入审批意见');
    return;
  }
  visible.value = false;
  const approvalOpinion = status === 'Y' ? '审批通过' : approval.value;
  let result = await AiAgentApi.updateStatus({
    agentNo,
    status,
    approvalOpinion,
  });
  console.log(result);
  message.success(result.message);
  reload();
};
// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);

// 是否显示详情弹框
const showDetail = ref<boolean>(false);

// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */
const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
  where.beginTime = '';
  where.endTime = '';
  where.nickName = '';
  (where.status = 'N'), (where.invisible = '');
  reload();
};

/**
 * 打开详情窗口
 *
 * @author fengshuonan
 * @date 2021/4/2 17:03
 */
const openDetail = async (row: any) => {
  console.log('row', row);
  current.value = await AiAgentApi.detail({ agentNo: row.agentNo });
  showDetail.value = true;
};
</script>
